<!DOCTYPE html>
<html lang="en">
<head>
  <title>Aspect Ratio with Preview Pane | Jcrop Demo</title>
  <meta http-equiv="Content-type" content="text/html;charset=UTF-8" />
  <link rel="stylesheet" type="text/css" href="css/jquery.Jcrop.css">
  <script src="js/jquery.min.js"></script>
  <script src="js/jquery.Jcrop.js"></script>
  <script type="text/javascript" src="js/xiaoguo.js"></script>
</head>
<body>
 
  <img src="danny.jpg" id="target" alt="[Jcrop Example]" />

  <div id="preview-pane">
    <div class="preview-container">
      <img src="danny.jpg" class="jcrop-preview" alt="Preview" />
    </div>
  </div>
  
  <input type="button" value="剪裁！！" id="btn">


  <script type="text/javascript">
      $("input").click(function(){
        var w = $(".jcrop-holder>div:first").css("width");
        var h = $(".jcrop-holder>div:first").css("height");
        var x = $(".jcrop-holder>div:first").css("left");
        var y = $(".jcrop-holder>div:first").css("top");
        alert(w + " " + h + " " + x + " " + y);
      });
  </script>
</body>
</html>

